<template>
  <div class="comOne">
    <h4>子组件comThree</h4>
    <h5 style="margin-top:40px;margin-left:20px;">
      父组件传递过来的值：
      <span style="color:red;">{{parentmsg}}</span>
    </h5>
    <el-button type="primary" style="margin-top:40px;" @click="getDataforParent">传值给子组件</el-button>

    <!-- 弹窗 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div>我是在子组件中定义的弹窗</div>
      <div style="margin-top:40px;color:red;">{{msg}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false, // 是否显示弹窗
      sonmsg: "我是子组件传递给父组件的值",
      msg: "",
    };
  },
  // 注意：
  // 1.把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能在子组件中使用这个数据
  // 2.组件中的props中的所有的数据，都是通过父组件传递过来的
  // 3.props中的数据，都是只读的，无法重新赋值
  props: ["parentmsg"],
  methods: {
    // 传值给父组件
    getDataforParent() {
      // 调用父组件方法，可以传递0-多个值
      this.$emit("func", this.sonmsg);
    },
    // 打开弹窗
    open(msg) {
      this.msg = msg;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
h4,
h5 {
  display: block;
  margin-top: 20px;
}
</style>